<template>
  <div>
    <div class="container-body w">
      <div class="card-container">
        <Row :gutter="16">
          <Col span="24">
            <Card style="width:100%;margin-top:20px">
              <!-- 职位图片 -->
              <div class="upload-container">
                <div class="demo-upload-list" v-for="item in uploadList">
                  <template v-if="item.status === 'finished'">
                    <img :src="item.url" />
                    <div class="demo-upload-list-cover">
                      <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                      <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                    </div>
                  </template>
                  <template v-else>
                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                  </template>
                </div>
                <Upload
                  ref="upload"
                  :show-upload-list="false"
                  :default-file-list="defaultList"
                  :on-success="handleSuccess"
                  :format="['jpg','jpeg','png']"
                  :max-size="2048"
                  :on-format-error="handleFormatError"
                  :on-exceeded-size="handleMaxSize"
                  :before-upload="handleBeforeUpload"
                  multiple
                  type="drag"
                  :action="upimgurl"
                  style="display: inline-block;width:58px;"
                >
                  <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera" size="20"></Icon>
                  </div>
                </Upload>
              </div>
              <!-- 表单 -->
              <div class>
                <Form
                  ref="formValidate"
                  :model="formValidate"
                  :rules="ruleValidate"
                  :label-width="80"
                >
                  <FormItem label="姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="输入姓名"></Input>
                  </FormItem>
                  <FormItem label="性别" prop="resumesexindex">
                    <Select v-model="formValidate.resumesexindex" placeholder="请选择性别">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.resumesex"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="出生年份" prop="birthyearsindex">
                    <Select v-model="formValidate.birthyearsindex" placeholder="请选择出生年份">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.birthyears"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="学历" prop="resumedegreesindex">
                    <Select v-model="formValidate.resumedegreesindex" placeholder="请选择学历">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.resumedegrees"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="工作经验" prop="resumeexperiencesindex">
                    <Select v-model="formValidate.resumeexperiencesindex" placeholder="请选择工作经验">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.resumeexperiences"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="自我介绍" prop="des">
                    <Input
                      v-model="formValidate.des"
                      type="textarea"
                      :autosize="{minRows: 2,maxRows: 5}"
                      placeholder="编辑自我介绍，工作经验等告诉别人你是不同的..."
                    ></Input>
                  </FormItem>
                  <FormItem label="个人亮点" prop="resumeadvantages">
                    <CheckboxGroup v-model="formValidate.resumeadvantages">
                      <Checkbox
                        :label="item"
                        v-for="(item,index) in dbase.resumeadvantage"
                        :key="index"
                      ></Checkbox>
                    </CheckboxGroup>
                  </FormItem>
                  <FormItem label="期望岗位" prop="jobcatindex">
                    <Select v-model="formValidate.jobcatindex" placeholder="请选择期望岗位">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.resumeexperiences"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="期望月薪" prop="resumesalariesindex">
                    <Select v-model="formValidate.resumesalariesindex" placeholder="请选择期望月薪">
                      <Option
                        :value="index"
                        v-for="(item,index) in dbase.jobcat"
                        :key="index"
                      >{{item}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="期望的工作地点" prop="address">
                    <Input v-model="formValidate.address" placeholder="输入期望的工作地点"></Input>
                  </FormItem>

                  <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交简历</Button>
                  </FormItem>
                </Form>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="sys-tips" v-show="tipsshow">
      <div class="inner">
        <div class="status">
          <div class="status-img">
            <img :src="statusimg"></img>
          </div>
        </div>
        <div class="bd">
          <div class="text1 ellips1">{{text1}}</div>
          <div class="text2 ellips2">{{text2}}</div>
          <div class="r-btn-group">
            <div class="sbtn1" @click="todetail">{{suretext1}}</div>
            <div class="sbtn2" @click="backindex">{{suretext2}}</div>
          </div>
        </div>
        <div class="close">
          <!-- <img src="/static/images/close.png" mode="" @click="tipstoggle"></img> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      upimgurl: this.$http.apiurl("upimg"),
      dbase: [],
      resumeavatar: "",
      tipsshow: false,
      statusimg: '',

      defaultList: [],
      imgName: "",
      visible: false,
      uploadList: [],
      resumeadvantage: "",

      formValidate: {
        comname: "",
        resumesexindex: "1",
        compnayindustryindex: "",
        resumedegreesindex: "",
        adress: "",
        des: "",
        resumeadvantages: [],
        name: "",
        tel: ""
      },
      ruleValidate: {
        comname: [
          {
            required: true,
            message: "企业名称不能为空",
            trigger: "blur"
          }
        ],
        address: [
          {
            required: true,
            message: "企业地址不能为空",
            trigger: "blur"
          }
        ],
        des: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur"
          },
          {
            type: "string",
            min: 20,
            message: "描述不能低于20字",
            trigger: "blur"
          }
        ],
        resumeadvantages: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "至少选择一项",
            trigger: "change"
          }
        ],
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur"
          }
        ],
        tel: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    var that = this;

    that.$axios.get(that.$http.apiurl("mpinfo")).then(res => {
      console.log(res.data);
      this.dbase = res.data.dbase;
    });
  },
  methods: {
    handleSubmit(name) {
      var full = this.formValidate;

      full.resumeavatar = this.resumeavatar;
      full.uid = this.uid;
      this.resumeadvantage = full.resumeadvantages.join(",");
      full.chosewelfare = this.resumeadvantage;
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$http.apost("resume", full).then(res => {
            console.log(res);
            if (res > 0) {
              this.$Message.success("提交成功!");
              this.tipsshow = true;
              this.rid = res;
              this.text1 = "提交简历成功";
              this.text2 = "快去看看新职位吧";
              this.suretext1 = "查看详情";
              this.suretext2 = "返回首页";
            } else {
              this.$Message.error("请填写完整表单!");
            }
          });
        } else {
          this.$Message.error("失败,请检查重试!");
        }
      });
    },
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      console.log(file);

      file.url = res;
      this.resumeavatar = res;
      file.name = "";
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc:
          "文件名为 " + file.name + " 的文件格式不正确,请上传jpg 或 png的格式"
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件大小超出限制",
        desc: "文件名为  " + file.name + " 过大, 请不要超过5M."
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded."
        });
      }
      return check;
    },
    todetail() {
      this.$router.push({ name: "resumedetail", query: { rid: this.rid } });
    },
    backindex() {
      this.$router.push({ name: "index", query: {} });
    }
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;
  }
};
</script>
<style lang="scss">
.card-container {
  background-color: #fff;
  padding: 10px;
  margin-top: 50px;
}
.upload-container {
  width: 100%;
  padding: 20px 0 20px 80px;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.r-btn-group {
  margin-top: 26px;

  .sbtn1 {
    font-size: 22px;
    color: #fff;
    letter-spacing: 6px;
    background: #0c8;
    width: 100%;
    margin-bottom: 10px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
  }

  .sbtn2 {
    font-size: 22px;
    color: #000;
    letter-spacing: 6px;
    background: #ccc;
    width: 100%;
    margin-bottom: 10px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
  }
}
</style>
